<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./assets/css/jquery.mobile.ios.theme.css">
    <link rel="stylesheet" href="./assets/css/style.css">
</head>
<body class="ui-overlay-h">
<div class="ui-panel-wrapper ui-page-theme-h" data-role="page" id="home">
    <div data-position="fixed" data-role="header" data-tap-toggle="false">
        <h1 class="header-title">活动信息</h1>
    </div>
    <div data-role="content">
        <div class="topic" style="background: #ffffff">
            <img src="./assets/images/slide1.png" style="width: 100%;height: auto;" alt="">
            <div class="">
                <div class="ui-bar" style="color: #BBBBBB;font-size: .9em;  ">金桥碧云社区关爱运动会</div>
                <div class="ui-padding">
                    <div style="display:inline-block;width: 70%">金桥碧云社区关爱运动会21KM马拉松</div>
                    <div style="display:inline-block;width: 30%"></div>
                    <div class="" style="font-size: .5em;">个人竞赛|线路赛</div>
                    <div class="" style="font-size: .5em;">距离开赛时间:</div>
                </div>

            </div>
        </div>
        <div class="collapsible" data-role="collapsible-set" data-inset="false" data-collapsed-icon="carat-d"
             data-iconpos="right"
             data-expanded-icon="carat-d">
            <div data-role="collapsible" data-inset="false">
                <h3><i class="ion-ios-clock-outline"></i> 报名方式</h3>
                <div>Content 2</div>
            </div>
            <div data-role="collapsible" data-inset="false">
                <h3><i class="ion-ios-clock-outline"></i> 时间进度</h3>
                <div> Content 1</div>
            </div>
        </div>
        <ul class="ui-margin-top" data-role="listview">
            <li>
                <div style="font-size:12px;text-align: center">主办方</div>
            </li>
            <li class="noborder" style="border-width: 0px">
                <div class="parent">
                    <div class="child"><img src="./assets/images/u1689.png" alt=""></div>
                    <div class="child"><img src="./assets/images/u1691.png" alt=""></div>
                    <div class="child"><img src="./assets/images/u1693.png" alt=""></div>
                    <div class="child"><img src="./assets/images/u1695.png" alt=""></div>
                    <div class="child"><img src="./assets/images/u1697.png" alt=""></div>
                    <div class="child"><img src="./assets/images/u1699.png" alt=""></div>
                    <div class="child"><img src="./assets/images/u1701.png" alt=""></div>
                    <div class="child"><img src="./assets/images/u1709.png" alt=""></div>
                </div>
            </li>
            <li class="noborder" style="border-width: 0px">
                <div style="font-size:12px;text-align: center">合作媒体</div>
            </li>
            <li class="noborder" style="border-width: 0px">
                <div class="parent">
                    <div class="child"><img src="./assets/images/u1701.png" alt=""></div>
                    <div class="child"><img src="./assets/images/u1709.png" alt=""></div>
                </div>

            </li>

        </ul>

    </div>

    <div data-role="footer" data-tap-toggle="false" data-position="fixed">
      <div class="ui-bar">我要报名</div> <!-- <button class="ui-btn ui-btn-c"></button>-->
    </div>

</div>
</body>
<script src="./assets/js/jquery.min.js"></script>
<script src="./assets/js/index.js"></script>
<script src="./assets/js/jquery.mobile-1.4.5.min.js"></script>


<script>
    $(function () {
        $("[data-role='navbar']").navbar();
        $("[data-role='header'], [data-role='footer']").toolbar();

    });


</script>
</body>
</html>
